<template>
  <div>
    <!--周-->
    <ul class="week"><li v-for="item in week" :key="item">{{item}}</li></ul>

    <div class="calendar-panel">
      <div class="row"  v-for="(row, index) in panelDateList" :key="index+'row'">
        <div class="date-row">
          <template v-for="(item, subIndex) in row">
            <div class="date last-month" v-if="index === 0 && item > 7" :key="item*(index+1)"
                 >{{item}}</div>
            <div  class="date next-month" v-else-if="(index === 5 || index === 4) && item < 7"
                 :key="item*(index+1)" >{{item}}</div>
            <div  class="date"  v-else :key="item*(index+1)">
              <span :class="[item===today && isThisMonth ? 'today' : '' ]">{{item}}</span>
            </div>
          </template>
        </div>
        <!--日程显示-->
        <div class="schedule-row"  @contextmenu.prevent>
          <div class="schedule-row-item" v-for="(daySchedule,inx) in getScheduleList[index]" :key="inx">
            <!--一天超过多个日程只显示第一个-->
            <div v-if="daySchedule.length > 0"  >
              <span :class="scheduleTheme[daySchedule[0].group]" >●</span>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  import { getNumberOfDaysInMonth } from "../../tools/getNumberOfDaysInMonth"
  import scheduleList from '../../mock/schedule'
  export default {
    name: "YearCalendar",
    components:{
    },
    props: {
      viewType: String,
      currentDate: Date
    },
    data () {
      return {
        visible:false,
        detailVisible:false,
        content:"",
        group:0,
        beginTime:'00:00',
        endTime:moment(new Date()).format('HH:mm'),
        editId:null,
        week: ['日','一','二','三','四','五','六'],
        today: new Date().getDate(),
        scheduleList: scheduleList,
        scheduleTheme: 'blue,grayGreen,orange,red,purple,fuchsia'.split(','),
      }
    },
    computed: {
      panelRowHeight () {
        // 日历面板 每行高度
        return `height: ${(window.innerHeight - 100)/6}px`
      },
      currentMonthDays () {
        return [...Array(getNumberOfDaysInMonth(this.currentDate))].map((v,k) => k + 1)
      },
      lastMonthDays () {
        // 上个月天数
        const lastMonth = new Date(this.currentDate).setMonth(new Date(this.currentDate.setDate(1)).getMonth() - 1)
        const daysNumber = getNumberOfDaysInMonth(lastMonth)
        // 根据当前月1日 计算 日历面板 上个月天数
        const panelNumberLastMonth = this.getDayOfMonthOn1st()
        const daysArr = []
        for (let i = 0; i < panelNumberLastMonth; i++) {
          daysArr.splice( 0, 0, daysNumber - i)
        }
        return daysArr
      },
      nextMonthDays () {
        // 根据当前月最后1日 计算 日历面板 下个月天数
        const panelNumberLastMonth = 6 - this.getDayOfMonthOnLastDay()
        const daysArr = []
        for (let i = 0; i < panelNumberLastMonth; i++) {
          daysArr.push( i + 1)
        }
        return daysArr
      },
      panelDateList () {
        const fullList = this.lastMonthDays.concat(this.currentMonthDays, this.nextMonthDays)
        const result = []
        for (let i=0;i< fullList.length; i+=7) {
          result.push(fullList.slice(i,i+7))
        }
        return result
      },
      isThisMonth () {
        // return true
        if (new Date().getMonth() === this.currentDate.getMonth() && new Date().getFullYear() === this.currentDate.getFullYear()) {
          return true
        } else{
          return false
        }
      },
      dateTypeFullList () {
        const result = []
        const lastMonth = new Date(this.currentDate).setMonth(new Date(this.currentDate.setDate(1)).getMonth() - 1)
        const nextMonth = new Date(this.currentDate).setMonth(new Date(this.currentDate.setDate(1)).getMonth() + 1)
        this.lastMonthDays.forEach(item => {
          result.push(new Date(lastMonth).setDate(item))
        })
        this.currentMonthDays.forEach(item => {
          result.push(this.currentDate.setDate(item))
        })
        this.nextMonthDays.forEach(item => {
          result.push(new Date(nextMonth).setDate(item))
        })
        return result
      },
      getScheduleList () {
        const result = [];
        this.dateTypeFullList.forEach((day,index) => {
          const schedule =
            this.scheduleList.filter(item =>
              moment(item.beginDate).format('YYYYMMDD') === moment(day).format('YYYYMMDD'))
          result.push(schedule)
        })

        const groupResult = []
        for (let i=0;i< result.length; i+=7) {
          groupResult.push(result.slice(i,i+7))
        }
        return groupResult
      },
    },
    mounted() {

    },
    methods: {
      getDayOfMonthOn1st () {
        const weekDay = new Date(this.currentDate.setDate(1)).getDay()
        return weekDay
      },
      getDayOfMonthOnLastDay () {
        const weekDay = new Date(this.currentDate.setDate(getNumberOfDaysInMonth(this.currentDate))).getDay()
        return weekDay
      },
    },
  }
</script>

<style lang="less" scoped>
  @import "../../tools/scrollbar";
  @LineColor: #E6E5E6;
  @Gray: #B9B9B9;
  @PrimaryColor: #1C72E8;

  ul,li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  ul.week {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: flex-end;
    li {
      width: 14.28%;
      line-height: 20px;
      text-align: center;
    }
  }
  .row {
    display: flex;
    position: relative;
    .date-row {
      display: flex;
      width: 100%;
      height: calc(100% - 20px);

      .date {
        width: 14.28%;
        height: 100%;
        padding: 2px;
        text-align: center;
        .today {
          width: 25px;
          height: 25px;
          display: inline-block;
          background: @PrimaryColor;
          text-align: center;
          color: white;
          border-radius: 50%;
          line-height: 25px;
        }
      }
      .last-month,
      .next-month {
        color: @Gray;
      }
    }
    .schedule-row {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      display: flex;
      &-item {
        width: 14.28%;
        height: 38px;
        overflow: auto;
        text-align: center;
        line-height: 44px;
      }
    }

  }

  .blue {
    color: rgb(0,168,249);
  }

  .grayGreen {
    color: rgb(49,157,10);
  }
  .orange{ // 个人
    color: rgb(249,216,80);
  }
  .red{ // 加班
    color: rgb(235,67,106);
  }
  .purple{ // 家庭
    color: rgb(249,214,74);
  }
</style>
